import {  Divider  } from 'antd';
import { Content } from 'antd/es/layout/layout';
import { memo, useCallback, useState } from 'react';

import { Header2Text } from '../../../../components/typography/Header2Text.tsx';

import { BarterOffer } from './BarterOffer/BarterOffer.tsx';
import { useBarterStyles } from './styles.tsx';
import { BarterTradeModal } from './TradeModal/BarterTradeModal.tsx';

import type { Offer } from '../../../../types.ts';
import type { FC } from 'react';

interface ITabBarterProps {
    incomeOffers: Offer[];
    outgoingOffers: Offer[];
}

export const TabBarter: FC<ITabBarterProps> = memo(({ outgoingOffers, incomeOffers }) => {
    const { styles } = useBarterStyles();
    
    const [modalOpen, setModalOpen] = useState(false);
    const [modalData, setModalData] = useState({
        initiatorAddress: '',
        receiverAddress: '',
        isInitiator: false,
    });

    const handleOpenModal = useCallback((w1: string, w2: string, isInitiator: boolean) => {
        setModalData({
            initiatorAddress: w1,
            receiverAddress: w2,
            isInitiator,
        });
        setModalOpen(true);
    },[]);
    
    return (
        <Content className={styles.wrapper}>
            <BarterTradeModal 
                isModalOpen={modalOpen}
                handleOk={() => setModalOpen(false)}
                handleCancel={() => setModalOpen(false)}
                modalData={modalData}
            />
            
            <Header2Text className={styles.barterTitle}>
                Предложения, созданные вами <span className={styles.barterTitleCount}>{outgoingOffers?.length}</span>
            </Header2Text>

            {outgoingOffers && <BarterOffer type="outgoing" offers={outgoingOffers} openModal={handleOpenModal}/>  }

            <Divider />

            <Header2Text className={styles.barterTitle}>
                Поступившие предложения <span className={styles.barterTitleCount}>{incomeOffers?.length}</span>
            </Header2Text>

            {incomeOffers && <BarterOffer type="incoming" offers={incomeOffers} openModal={handleOpenModal}/>}

        </Content>
    );
});

